<template>
  <div class="setting-wrapper">
    <a-tabs
      tab-position="top"
      default-active-key="table"
      animated
      v-model:activeKey="currentKey"
    >
      <a-tab-pane key="table" tab="表格">
        <TableConfig />
      </a-tab-pane>
      <a-tab-pane key="field" tab="字段">
        <FieldConfig />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useTableStore } from "@/store/table";
import TableConfig from "./TableConfig.vue";
import FieldConfig from "./FieldConfig.vue";

const store = useTableStore();
const currentKey = ref("table");
watch(
  () => store.currentField,
  () => {
    currentKey.value = "field";
  }
);
</script>

<style lang="less" scoped>
.setting-wrapper {
  padding: 0 10px;
  overflow-x: hidden;
}
</style>
